import React, { FC, useEffect, useRef, useState } from "react";
import * as echarts from "echarts";
import { EChartsOption, EChartsResponsiveOption } from "echarts";
import type { AnnularChartsProps } from "@/types/echartInterface";

const AnnularChart: FC<AnnularChartsProps> = (props) => {
  const chartRef = useRef<HTMLDivElement | null>(null);

  const {
    title,
    annularList,
    colors,
    annularChartStyle,
    colorList,
    text = "",
  } = props;
  useEffect(() => {
    // Initialize the chart
    const chartInstance = echarts.init(chartRef.current!);
    // 组装数据
    const newAnnularList =
      annularList &&
      annularList.map((item) => {
        return {
          ...item,
          itemStyle: {
            //  @ts-ignore
            color: new echarts.graphic.RadialGradient(0, 0, 1, [
              {
                offset: 0,
                color: colorList[item.name][0],
              },
              {
                offset: 1,
                color: colorList[item.name][1],
              },
            ]),
          },
        };
      });

    // Set chart options
    const options: EChartsOption = {
      title: {
        text: text,
        left: "center", // 对齐方式居中
        top: "34%", // 距离顶部
        textStyle: {
          // 文字配置
          color: "#000", // 文字颜色
          fontSize: 18, // 字号
          fontWeight: 600,
          align: "center", // 对齐方式
        },
        itemGap: 6, //主副标题之间的距离
        subtext: title,
        subtextStyle: {
          fontSize: 15,
          color: "#000", // 文字颜色
        },
      },

      tooltip: {
        show: true,
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      legend: {
        top: "bottom",
      },
      series: [
        {
          name: title,
          type: "pie",
          radius: ["40%", "60%"],
          top: -50,
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: true,
            position: "outside",
            formatter: (params: any) => {
              if (params.name === Object.keys(colorList)[0]) {
                return (
                  "{a| " + params.value + "}\n{a| " + params.percent + "%}"
                );
              } else if (params.name === Object.keys(colorList)[1]) {
                return (
                  "{b| " + params.value + "}\n{b| " + params.percent + "%}"
                );
              } else {
                return "{c|" + params.value + "}\n{c| " + params.percent + "%}";
              }
            },
            rich: {
              a: {
                color: "#4292FF",
                align: "left",
                padding: 4,
              },
              b: {
                color: "#5DDEE6",
                align: "left",
                padding: 4,
              },
              c: {
                color: "#FFC900",
                align: "left",
                padding: 4,
              },
            },
          },
          labelLine: {
            show: true,
            length: 10,
            length2: 10,
          },
          data: newAnnularList,
        },
      ],
    };

    // Use the specified options
    chartInstance.setOption(options as EChartsResponsiveOption);

    // Cleanup chart instance on component unmount
    return () => {
      chartInstance.dispose();
    };
  }, [title, annularList, colors]);

  return <div ref={chartRef} style={annularChartStyle} />;
};

export default AnnularChart;
